<html>
    <head>
        <!--title标签用于设置页面标题-->
        <title>打字练习</title>
        <meta charset="utf-8">
        <style>
            #char{
                width: 500px;
                height: 500px;
                /*设置边框的宽度，颜色，样式*/
                border: 5px solid blue;
                margin: 0 auto;
                /*设置边框圆角半径，设置为元素宽高的一半时能够显示为圆形*/
                border-radius: 50%;
                /*设置字体大小*/
                font-size: 300px;
                /*字体颜色*/
                /*color: blue;*/
                /*设置文本水平方向的对齐方式*/
                /*text-align: center;*/
                /*设置行高，当行高和元素本身高度一样时，可以实现文本垂直居中*/
                line-height: 500px;
            }
            #result{
                font-size: 30px;
            }
            body{
                text-align: center;
                color: blue;
            }
            @keyframes sway{
                0%{
                    transform: translate(0,0);
                }
                25%{
                    transform: translate(-50px,0);
                }
                75%{
                    transform: translate(50px,0);
                }
                100%{
                    transform: translate(0,0);
                }
            }
            .err{
                color: red;
                animation: sway 200ms linear;
                animation-iteration-count: infinite;
            }
            @keyframes zoomin{
                0%{
                    transform: scale(0.2,0.2);
                }
                100%{
                    transform: scale(1,1);
                }
            }
            .show{
                animation: zoomin 300ms;
            }

        </style>
    </head>
    <body>
        <div id="char">
            <div id="inner"></div>
        </div>
        <p id="result">正确0个，错误0个，正确率0%</p>
    </body>
    <script>
        //定义两个变量，分别记录正确数量和错误数量。
        var correct = 0;
        var wrong = 0;

        //获得页面中id为char的元素（div）
        var char =document.getElementById("inner");
        var result = document.getElementById("result");

        var timer = null;

        //onkeydown，键盘按下事件。
        document.body.onkeydown =function(e){
            if(!timer){
                timer = setTimeout(() => {
                    alert("时间到");
                }, 60000);
            }

            //e.key表示按下的键。
            //toUpperCase将字符转为大写。
            if(e.keyCode>=65&&e.keyCode<=90){
                var input = e.key.toUpperCase();
                if(input==char.textContent){
                    //如果输入正确，则再次生成一个字母
                    createChar();
                    char.classList.add("show");
                    setTimeout(function() {
                        char.classList.remove("show");
                    }, 300);
                    //++表示自增1.
                    correct++;
                }else{
                    //为元素添加一个class属性
                    char.classList.add("err");
                    //延时执行一段代码
                    setTimeout(function() {
                        //移除一个class属性。
                        char.classList.remove("err");
                    }, 500);
                    wrong++;
                }

                count();

            }
        }


        //生成随机字母的函数。
        function createChar(){
            //Math.random()，生成一个[0,1)的随机数，可能等于0，但不会等于1.
            var num = Math.random()*26;

            //Math.floor向下取整。
            num = Math.floor(num);

            num = num+65;

            //将数字转为与之对应的字符。
            var ch = String.fromCharCode(num);

            //把随机生成的字符显示在div中
            char.textContent = ch;
        }

        //调用函数，函数中的代码才会执行。
        createChar();

        //统计结果的函数
        function count(){
            var rate = correct/(correct+wrong)*100;

            //四舍五入保留两位小数。
            rate = rate.toFixed(2);

            result.textContent = "正确:"+correct+"个，错误:"+wrong+"个，正确率:"+rate+"%";
        }

    </script>
</html>